<template>
  <el-select
    v-loadmore="lazeFech"
    :filterable="filterable"
    :value="value"
    clearable
    placeholder="请选择"
    :filter-method="getKeyWordSearch"
    style="width: 100%"
    @focus="focus"
    @clear="clear"
    v-on="$listeners"
  >
    <el-option
      v-for="(item, index) in options"
      :key="index"
      :label="item[label]"
      :value="item[selectvalue]"
    />
    <el-option v-if="hasMore" disabled label="加载中..." value="-1" />
  </el-select>
</template>

<script>
export default {
  name: 'Index',
  directives: {
    loadmore: {
      // 指令的定义
      bind(el, binding, vnode) {
        const selectDom = el.querySelector(
          '.el-select-dropdown .el-select-dropdown__wrap'
        )
        selectDom.addEventListener('scroll', function() {
          const theBottom = this.scrollHeight - this.scrollTop <= this.clientHeight
          if (theBottom) {
            binding.value()
          }
        })
      }
    }
  },
  props: {
    // 绑定的值
    value: {
      type: String,
      default: ''
    },
    // 显示的名字的字段
    label: {
      type: String,
      default: 'label'
    },
    // 值的字段
    selectvalue: {
      type: String,
      default: 'value'
    },
    // 每次加载的条数
    num: {
      type: Number,
      default: 10
    },
    // 接口地址
    url: {
      type: String,
      default: ''
    },
    // 额外请求参数
    extraparams: {
      type: Object,
      default: () => ({})
    },
    // 参数路径
    objpath: {
      type: String,
      default: 'data.records'
    },
    // 是否支持输入搜索 注意：精确搜索选中后必须清除才能进行普通加载
    filterable: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      flag: true,
      hasMore: true,
      options: [],
      pageNum: 1
    }
  },
  methods: {
    // 获取焦点
    focus() {
      if (!this.options.length) {
        // 默认请求第一页数据
        this.feach()
      }
    },
    feach(params = {}) {
      if (this.url === '') {
        this.$message.warning('接口不能为空')
        return
      }
      // 如果有额外参数就接收
      if (Object.keys(this.extraparams)) {
        params = {
          ...this.extraparams
        }
      }
      params.pageSize = this.num
      params.pageNum = this.pageNum
      this.$get(this.url, params).then(res => {
        const newData = res.data
        // 处理完路径后的数组
        const disposeArr = this.ObjPath(newData, this.objpath)
        // 当请求的条数小于8的时候不展示加载中
        if (disposeArr.length < 8) {
          this.hasMore = false
        }
        if (newData) {
          this.options = this.options.concat(disposeArr)
        }
        console.log(this.options)
        this.flag = true
      })
    },
    //  匹配对象路径函数
    ObjPath(obj, path) {
      const arr = path.split('.')
      let res = obj
      let prop
      // 重复赋值
      // eslint-disable-next-line no-cond-assign
      while (prop = arr.shift()) {
        res = res[prop]
      }
      return res
    },
    lazeFech() {
      // 如果没有更多数据，则不请求
      if (!this.hasMore) {
        return
      }
      console.log('到底了')
      // 节流阀: 防止数据没有请求出来触发多次触底方法
      if (this.flag) {
        this.pageNum++
        this.flag = false
        this.feach()
      }
    },
    // 关键字搜索
    getKeyWordSearch(text) {
      this.options = []
      this.extraparams[this.label] = text
      this.feach()
    },
    // 删除选中时，如果请求了关键字，则清除关键字再请求第一页的数据
    clear() {
      if (this.extraparams[this.label]) {
        this.options = []
        this.extraparams[this.label] = ''
        this.pageNum = 1
        this.feach()
      }
    }
  }
}
</script>

<style scoped>

</style>
